<div class="column is-3 p-6 is-hidden-mobile sidebar"><!-- height: 100vh; overflow-y:auto;">-->
    <aside class="menu" style="margin-top: -0.5em;">
        <!-- <p class="menu-label">
            Documentation
        </p> -->
        <ul class="menu-list">
            <li><a style="display:flex; align-items:center" <||= if all? @[2 = size pagePath "documentation" = first pagePath  "_index" = last pagePath] [ ||> class="is-active" <||]||> href="<||= linkTo {documentation} ||>">
                <||= switch all? @[2 = size pagePath "documentation" = first pagePath  "_index" = last pagePath] [
                    ; ph-house-fill
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M224 115.5V208a16.1 16.1 0 0 1-8.4 14.1a15.3 15.3 0 0 1-7.6 1.9h-48a8 8 0 0 1-8-8v-48a8 8 0 0 0-8-8h-32a8 8 0 0 0-8 8v48a8 8 0 0 1-8 8H48a15.9 15.9 0 0 1-12-5.4a16.9 16.9 0 0 1-4-11v-92.1a16 16 0 0 1 5.2-11.8l80-72.7a16 16 0 0 1 21.6 0l80 72.7a16 16 0 0 1 5.2 11.8Z"/></svg>}
                ][
                    ; ph-house-bold
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 228h-48a20.1 20.1 0 0 1-20-20v-44h-24v44a20.1 20.1 0 0 1-20 20H48a20.1 20.1 0 0 1-20-20v-92.5a20 20 0 0 1 6.6-14.8L114.5 28a20 20 0 0 1 27 0l80 72.7a20.3 20.3 0 0 1 6.5 14.8V208a20.1 20.1 0 0 1-20 20Zm-44-24h40v-86.7l-76-69.1l-76 69.1V204h40v-44a20.1 20.1 0 0 1 20-20h32a20.1 20.1 0 0 1 20 20Z"/></svg>}
                ] ||>&nbsp;&nbsp;Home</a></li>
            <li><a style="display:flex; align-items:center" <||= if contains? pagePath "getting started" [||> class="is-active" <||]||> href="<||= linkTo {documentation/getting started} ||>">
                <||= switch contains? pagePath "getting started" [
                    ; ph-play-circle-fill
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.2 104.2 0 0 0 128 24Zm36.4 110.7l-48 32a8.7 8.7 0 0 1-4.4 1.3a8.5 8.5 0 0 1-3.8-.9a8 8 0 0 1-4.2-7.1V96a8 8 0 0 1 4.2-7.1a8.3 8.3 0 0 1 8.2.4l48 32a8 8 0 0 1 0 13.4Z"/></svg>}
                ][
                    ; ph-play-circle-bold
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 20a108 108 0 1 0 108 108A108.1 108.1 0 0 0 128 20Zm0 192a84 84 0 1 1 84-84a84.1 84.1 0 0 1-84 84Zm40-84a11.9 11.9 0 0 1-5.1 9.8l-40 28a11.8 11.8 0 0 1-6.9 2.2a10.7 10.7 0 0 1-5.5-1.4A11.8 11.8 0 0 1 104 156v-56a12 12 0 0 1 18.9-9.8l40 28a11.9 11.9 0 0 1 5.1 9.8Z"/></svg>}
                ] ||>&nbsp;&nbsp;Getting Started</a></li>
            <li><a style="display:flex; align-items:center" <||= if contains? pagePath "in a nutshell" [||> class="is-active" <||]||> href="<||= linkTo {documentation/in a nutshell} ||>">
                <||= switch contains? pagePath "in a nutshell" [
                    ; ph-magic-wand-fill
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M56 60a8 8 0 0 1 8-8h12V40a8 8 0 0 1 16 0v12h12a8 8 0 0 1 0 16H92v12a8 8 0 0 1-16 0V68H64a8 8 0 0 1-8-8Zm184 84h-16v-16a8 8 0 0 0-16 0v16h-16a8 8 0 0 0 0 16h16v16a8 8 0 0 0 16 0v-16h16a8 8 0 0 0 0-16Zm-58.3-26.3L75.3 224a15.9 15.9 0 0 1-22.6 0L32 203.3a15.9 15.9 0 0 1 0-22.6L180.7 32a16.1 16.1 0 0 1 22.6 0L224 52.7a15.9 15.9 0 0 1 0 22.6l-42.3 42.4Zm-5.7-17L212.7 64L192 43.3L155.3 80Zm8 91.3h-8v-8a8 8 0 0 0-16 0v8h-8a8 8 0 0 0 0 16h8v8a8 8 0 0 0 16 0v-8h8a8 8 0 0 0 0-16Z"/></svg>}
                ][
                    ; ph-magic-wand-bold
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M256 152a12 12 0 0 1-12 12h-12v12a12 12 0 0 1-24 0v-12h-12a12 12 0 0 1 0-24h12v-12a12 12 0 0 1 24 0v12h12a12 12 0 0 1 12 12ZM60 68h8v8a12 12 0 0 0 24 0v-8h8a12 12 0 0 0 0-24h-8v-8a12 12 0 0 0-24 0v8h-8a12 12 0 0 0 0 24Zm120 124h-4v-4a12 12 0 0 0-24 0v4h-4a12 12 0 0 0 0 24h4v4a12 12 0 0 0 24 0v-4h4a12 12 0 0 0 0-24Zm4.5-71.5L78.1 226.8a19.8 19.8 0 0 1-28.2 0l-20.7-20.7a19.8 19.8 0 0 1 0-28.2L177.9 29.2a19.9 19.9 0 0 1 28.2 0l20.7 20.7a19.8 19.8 0 0 1 0 28.2l-42.3 42.4ZM161 80l15 15l31-31l-15-15Zm-2 32l-15-15l-95 95l15 15Z"/></svg>}
                ] ||>&nbsp;&nbsp;In A Nutshell</a></li>
            <li><a style="display:flex; align-items:center" <||= if contains? pagePath "language" [||> class="is-active" <||]||> href="<||= linkTo {documentation/language} ||>">
                <||= switch contains? pagePath "language" [
                    ; ph-tree-fill
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 187.9a91.6 91.6 0 0 0 8 4.6V232a8 8 0 0 1-16 0v-39.5a91.6 91.6 0 0 0 8-4.6Zm70.1-125.3a76 76 0 0 0-140.2 0A72.3 72.3 0 0 0 16 127.8c-.1 38.8 31.4 71.2 70.1 72.2a71.9 71.9 0 0 0 33.9-7.5v-35.6l-43.6-21.7a8 8 0 1 1 7.2-14.4l36.4 18.3V88a8 8 0 0 1 16 0v27.1l36.4-18.3a8 8 0 0 1 7.2 14.4L136 132.9v59.6a72 72 0 0 0 32 7.5h1.9c38.7-1 70.2-33.4 70.1-72.2a72.3 72.3 0 0 0-41.9-65.2Z"/></svg>}
                ][
                    ; ph-tree-bold
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M201.2 59.6a80.1 80.1 0 0 0-146.4 0A76.4 76.4 0 0 0 12 127.8c-.1 41 33.1 75.1 74 76.2a77.8 77.8 0 0 0 30-5.3V232a12 12 0 0 0 24 0v-33.3a75.7 75.7 0 0 0 28 5.3h2c40.9-1.1 74.1-35.2 74-76.2a76.4 76.4 0 0 0-42.8-68.2ZM169.4 180a51.7 51.7 0 0 1-29.4-8.2v-36.4l41.4-20.7a12 12 0 0 0-10.8-21.4L140 108.6V88a12 12 0 0 0-24 0v44.6l-30.6-15.3a12 12 0 0 0-10.8 21.4l41.4 20.7v12.4a52 52 0 1 1-49.7-91a19.8 19.8 0 0 0 10-10.5a56.1 56.1 0 0 1 103.4 0a19.8 19.8 0 0 0 10 10.5a52 52 0 0 1-20.3 99.2Z"/></svg>}
                ] ||>&nbsp;&nbsp;Language</a></li>
            <li><a style="display:flex; align-items:center" <||= if contains? pagePath "command line" [||> class="is-active" <||]||> href="<||= linkTo {documentation/command line} ||>">
                <||= switch contains? pagePath "command line" [
                    ; ph-monitor-fill
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M232 62.9v112a24 24 0 0 1-24 24H48a24 24 0 0 1-24-24v-112a24.1 24.1 0 0 1 24-24h160a24.1 24.1 0 0 1 24 24Zm-72 152H96a8 8 0 1 0 0 16h64a8 8 0 0 0 0-16Z"/></svg>}
                ][
                    ; ph-monitor-bold
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 36H48a28.1 28.1 0 0 0-28 28v112a28.1 28.1 0 0 0 28 28h160a28.1 28.1 0 0 0 28-28V64a28.1 28.1 0 0 0-28-28Zm4 140a4 4 0 0 1-4 4H48a4 4 0 0 1-4-4V64a4 4 0 0 1 4-4h160a4 4 0 0 1 4 4Zm-40 52a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12Z"/></svg>}
                ] ||>&nbsp;&nbsp;Command Line</a></li>
            <li><a style="display:flex; align-items:center" <||= if contains? pagePath "library" [||> class="is-active" <||]||> href="<||= linkTo {documentation/library} ||>">
                <||= switch contains? pagePath "library" [
                    ; ph-books-fill
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M233.6 195.6L192.2 41a16 16 0 0 0-19.6-11.3L141.7 38l-1 .3A16 16 0 0 0 128 32H96a15.8 15.8 0 0 0-8 2.2a15.8 15.8 0 0 0-8-2.2H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h32a15.8 15.8 0 0 0 8-2.2a15.8 15.8 0 0 0 8 2.2h32a16 16 0 0 0 16-16v-99.6l27.8 103.7a16 16 0 0 0 15.5 11.9a19.9 19.9 0 0 0 4.1-.5l30.9-8.3a16 16 0 0 0 11.3-19.6ZM176.7 45.2l6.3 23.1l-30.9 8.3l-6.3-23.1ZM128 48v120H96V48Zm-48 0v24H48V48Zm48 160H96v-24h32v24Zm90.2-8.3l-30.9 8.3l-6.3-23.2l31-8.3l6.2 23.2Z"/></svg>}
                ][
                    ; ph-books-bold
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m237.5 194.5l-8.3-30.9L196.1 40a20.1 20.1 0 0 0-24.5-14.2l-29.6 8a19.6 19.6 0 0 0-14-5.8H96a19.8 19.8 0 0 0-8 1.7a19.8 19.8 0 0 0-8-1.7H48a20.1 20.1 0 0 0-20 20v160a20.1 20.1 0 0 0 20 20h32a19.8 19.8 0 0 0 8-1.7a19.8 19.8 0 0 0 8 1.7h32a20.1 20.1 0 0 0 20-20v-69.2l19.9 74.4a20.1 20.1 0 0 0 19.4 14.8a17.9 17.9 0 0 0 5.1-.7l30.9-8.3a20 20 0 0 0 14.2-24.5Zm-76.4-99.6l23.2-6.2l18.6 69.6l-23.2 6.2Zm12.8-44.8l4.2 15.4l-23.2 6.2l-4.2-15.4ZM124 164h-24V52h24ZM76 52v16H52V52ZM52 92h24v112H52Zm48 112v-16h24v16Zm90.1-.9l-4.2-15.5l23.2-6.2l4.2 15.5Z"/></svg>}
                ] ||>&nbsp;&nbsp;Library</a>
                <||= if contains? pagePath lower "library" [||>
                    <ul style="margin-right:0">
                        <||= loop sort keys pageTree\documentation\library 'modul [ ||>
                            <li><a <||= if contains? pagePath lower modul [||>class="is-active" <||]||> href="<||= linkTo ~{documentation/library/|modul|}||>"><||= capitalize modul ||></a>
                            <||= if (get pagePath (size pagePath)-2) = lower modul [||>
                                <ul style="margin-right:0">
                                    <||= loop sort keys get pageTree\documentation\library modul 'fun [ ||>
                                        <li><a <||= if contains? map pagePath => lower lower fun [||>class="is-active" <||]||> href="<||= linkTo ~{documentation/library/|modul|/|lower fun|} ||>"><||= replace fun "-" "?" ||></a></li>
                                    <|| ] ||>
                                </ul>
                            <|| ] ||>
                            </li>
                        <|| ] ||>
                    </ul>
                <|| ] ||>
            </li>
            <li><a style="display:flex; align-items:center" <||= if contains? pagePath "examples" [||> class="is-active" <||]||> href="<||= linkTo {documentation/examples} ||>">
                <||= switch contains? pagePath "examples" [
                    ; ph-flask-fill
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M223.6 199.8L160 93.8V40h8a8 8 0 0 0 0-16H88a8 8 0 0 0 0 16h8v53.8l-40.2 66.9c0 .1-.1.2-.1.3l-23.3 38.8A16 16 0 0 0 46.1 224h163.8a16 16 0 0 0 13.7-24.2Zm-92-39c-14.3-7.1-32.7-13.5-50.3-11.4l28.4-47.4a15.9 15.9 0 0 0 2.3-8.2V40h32v53.8a15.9 15.9 0 0 0 2.3 8.2l38.8 64.8c-13.1 7.1-31.4 5.1-53.5-6Z"/></svg>}
                ][
                    ; ph-flask-bold
                    {<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m227 197.7l-63-105V44h4a12 12 0 0 0 0-24H88a12 12 0 0 0 0 24h4v48.7l-39.6 66v.2L29 197.7A19.9 19.9 0 0 0 46.1 228h163.8a19.9 19.9 0 0 0 17.1-30.3Zm-113.9-93.6a19.8 19.8 0 0 0 2.9-10.3V44h24v49.8a19.8 19.8 0 0 0 2.9 10.3l36.5 60.9c-14.3 5.2-32.3-.9-46-7.7c-17.9-9-32.7-12.3-44.8-12.3ZM53.2 204l18.3-30.6c15-9.1 35.9-2.3 51.1 5.3c17.9 9 32.8 12.3 45 12.3a56.3 56.3 0 0 0 24.3-5.2l10.9 18.2Z"/></svg>}
                ] ||>&nbsp;&nbsp;Examples</a></li>
        </ul>
      </aside>
</div>